import React from "react";
import styled from "styled-components";
import {
    comparisionColor,
    swapColor,
    sortedColor,
    pivotColor,
} from "./common/config";

import {
    ArrayHolder,
    ArrayItem,

} from "./common/styles";

let array = ["original", "pivot", "searching", "swapping", "sorted"]
export function ColorContainer({
                               }) {

    function getBackgroundColor(i) {
        if (i === "pivot") {
            return pivotColor;
        }

        if (i === "searching") {
            return comparisionColor;
        }

        if (i === "swapping") {
            return swapColor;
        }

        if (i === "sorted") {
            return sortedColor;
        }
        return "";
    }

    return (
        <div className="d-flex justify-content-evenly align-content-center text-center">
            {array.map((value, i) => {
                return (
                   <div className="">
                        <div>{value}</div>
                       <div className={"d-flex justify-content-evenly align-content-center text-center"}>
                            <ArrayItem
                                // key={i + ":" + destination + ":" + source + ":" + value}
                                style={{
                                    order: i,
                                    backgroundColor: getBackgroundColor(value),

                                }}
                            />
                           </div>
                    </div>
                );
            })}
        </div>
    );
}
